
<template>
  <div class="item-class-show">
    <Row class="item-class-group" v-for="(items, index) in tagsInfo" :key="index">
      <i-col class="item-class-name" span="1">{{ items.tagName }} : </i-col>
      <i-col class="item-class-select" span="21">
        <span  v-for="(item, subIndex) in items.tags" :key="subIndex">{{ item }}</span>
      </i-col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'GoodsClassNav',
  data () {
    return {
      tagsInfo: [
        {
          tagName: '品牌',
          tags: [ 'FTHJ', '拉夏贝尔（La Chapelle）', '铂朗尼奥', '摩斯维(msvii)', '诗若朗华', '莫凡(Mofi)', '依蔻兰蒂（yiKOULANDi）', '梵莎妍（FanShaYan）', '亿色(ESR)', '柏格伦', '优加' ]
        },
        {
          tagName: '尺码',
          tags: [ '35', '37', '38', '39', '40', '60', '80', '100', '120', '140' ]
        },
        {
          tagName: '风格',
          tags: [ '英伦风', '运动风', '港风', '简约风', '国潮风', '甜美风', '嘻哈风', '朋克风', '优雅风', '日系风', '百搭风', '日韩风', '韩版街头风', '古典风', '潮流风', '小清新' ]
        },
        {
          tagName: '图案',
          tags: [ '纯色', '圆点', '印花', '碎花', '格子', '条纹', '心形', '数字', '字母', '人物', '其他' ]
        }
      ]
    };
  }
};
</script>

<style scoped>
.item-class-show {
  margin: 15px auto;
  width: 100%;
}
.item-class-group {
  margin-top: 1px;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.item-class-group:first-child {
  border-top: 1px solid #ccc;
}
.item-class-name {
  padding-left: 15px;
  line-height: 44px;
  color: #666;
  font-weight: bold;
  background-color: #f3f3f3;
}
.item-class-name:first-child {
  line-height: 43px;
}
.item-class-select span {
  margin-left: 15px;
  width: 160px;
  color: #005aa0;
  line-height: 45px;
  cursor: pointer;
}
.item-class-select span:hover{
  color:red
}
</style>
